<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>珈云管理端</title>
  <link rel="shortcut icon" href="favicon.ico">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="plugins/element-ui/index.css"/>
  <link rel="stylesheet" href="styles/common.css"/>
  <link rel="stylesheet" href="styles/index.css"/>
  <link rel="stylesheet" href="styles/icon/iconfont.css"/>
  <style>
      .body {
          min-width: 1366px;
      }

      .app-main {
          height: calc(100% - 64px);
      }

      .app-main .divTmp {
          width: 100%;
          height: 100%;
      }
  </style>
</head>

<body>
<div class="app" id="app">
  <div class="app-wrapper openSidebar clearfix">
    <!-- sidebar -->
    <div class="sidebar-container">
      <div class="logo">
        <!-- <img src="images/logo1.jpg" width="122.5" alt="" /> -->
        <span style="color:#fff;font-size: 20px;">珈云系统</span>
      </div>
      <!--          <el-scrollbar wrap-class="scrollbar-wrapper">-->
      <el-menu
          :default-active="defAct"
          :unique-opened="false"
          :collapse-transition="false"
          background-color="#343744"
          text-color="#bfcbd9"
          active-text-color="#f4f4f5"
          style="max-height: 100%;overflow-y: auto;margin-top: -90px;"
      >
        <div v-for="item in menuList" :key="item.id">
          <el-submenu :index="item.id" v-if="item.children && item.children.length>0">
            <template slot="title">
              <i class="iconfont" :class="item.icon"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item
                v-for="sub in item.children"
                :index="sub.id"
                :key="sub.id"
                @click="menuHandle(sub,false)"
            >
              <i :class="iconfont" :class="sub.icon"></i>
              <span slot="title">{{sub.name}}</span>
            </el-menu-item
            >
          </el-submenu>
          <el-menu-item v-else :index="item.id" @click="menuHandle(item,false)">
            <i class="iconfont" :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </div>
      </el-menu>
      <!--          </el-scrollbar>-->
    </div>
    <div class="main-container">
      <!-- <navbar /> -->
      <div class="navbar">
        <div class="head-lable">
              <span v-if="goBackFlag" class="goBack" @click="goBack()"
              ><img src="images/icons/btn_back@2x.png" alt=""/> 返回</span
              >
          <span>{{headTitle}}</span>
        </div>
        <div class="right-menu">
          <div class="avatar-wrapper">{{ userInfo.name }}</div>
          <!-- <div class="logout" @click="logout">退出</div> -->
          <img src="images/icons/btn_close@2x.png" class="outLogin" alt="退出" @click="logout"/>
        </div>
      </div>
      <div class="app-main" v-loading="loading">
        <div class="divTmp" v-show="loading"></div>
        <iframe
            id="cIframe"
            class="c_iframe"
            name="cIframe"
            :src="iframeUrl"
            width="100%"
            height="auto"
            frameborder="0"
            v-show="!loading"
        ></iframe>
      </div>
    </div>
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/login.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        defAct: '1',
        menuActived: '1',
        userInfo: {},
        /*左侧导航栏数据*/
        menuList: [
          {
            id: '1',
            name: '欢迎页面',
            url: 'page/hello.html',
            icon: 'icon-kechengchakan'
          },
          {
            id: '2',
            name: '一键开店',
            url: 'page/kaidian/kaidian.html',
            icon: 'icon-guanliyuan'
          },
          {
            id: '3',
            name: '店铺管家',
            url: 'page/shopkeeper/list.html',
            icon: 'icon-jiaoshi'
          },
          {
            id: '4',
            name: '教师管理',
            url: 'page/teacher/list.html',
            icon: 'icon-yonghufill'
          },
          {
            id: '5',
            name: '会员管理',
            url: 'page/member/list.html',
            icon: 'icon-ly_huiyuanka'
          },
          {
            id: '6',
            name: '卡片模板',
            url: 'page/card/list.html',
            icon: 'icon-jiaoshi'
          },
          {
            id: '7',
            name: '标签管理',
            url: 'page/tags/list.html',
            icon: 'icon-tianchongxing-'
          },
          {
            id: '8',
            name: '通知管理',
            url: 'page/notice/list.html',
            icon: 'icon-huodong'
          },
          {
            id: '9',
            name: '新闻管理',
            url: 'page/news/list.html',
            icon: 'icon-fenlei'
          },
          // {
          //     id: '10',
          //     name: '设置管理',
          //     url  : 'page/shop/list.html',
          //     icon: 'icon-shangpin'
          // },
          {
            id: '11',
            name: '管理员管理 ',
            url: 'page/admin/list.html',
            icon: 'icon-dingdan'
          }
        ],
        //iframeUrl: 'page/admin/list.html',
        iframeUrl: 'page/hello.html',
        headTitle: '欢迎页面',
        goBackFlag: false,
        loading: true,
        timer: null,
        historyStack: [],
        currentPage: null,
        isFromHistory: false,
        pageHistory: []
      }
    },
    computed: {},
    created() {
      const userInfo = window.localStorage.getItem('userInfo');
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
      this.closeLoading()
    },
    beforeDestroy() {
      this.timer = null;
      clearTimeout(this.timer);
    },
    mounted() {
      window.menuHandle = this.menuHandle;
      // 相当于全局变量
      window.safeNavigateTo = this.safeNavigateTo;
      window.goBack = this.goBack;
    },
    methods: {
      // 定义根页面以方便清除历史页面
      isRootPage(url) {
        return url.includes('list.html') ||
          url.includes('kaidian.html') ||
          url.includes('hello.html');
      },
      logout() {
        var flag = confirm("确定要退出系统吗？");
        if (flag) {
          logoutApi().then((res) => {
            if (res.code === 1) {
              window.ELEMENT.Message({
                message: res.msg,
                type: 'success',
              })
              setTimeout(function () {
                /*从本地栈内移除数据*/
                localStorage.removeItem('userInfo');
				localStorage.removeItem('adminId');
                window.location.href = 'page/login/login.html';
              }, 1000)
            } else {
				// localStorage.removeItem('userInfo');
				// localStorage.removeItem('adminId');
              setTimeout(function () {
                window.ELEMENT.Message({
                  message: res.msg,
                  type: 'error',
                })
              }, 1000)
            }
          })
        }
      },
      goBack() {
        //   栈的逻辑
        // 标记为从历史记录跳转
        // 这里的url也会包括从“上一个页面”传递过来的参数
        if (this.pageHistory.length > 0) {
          const prevPage = this.pageHistory.pop();
          this.menuHandle({
            id: prevPage.menuId,
            url: prevPage.url,
            name: prevPage.title
          }, true);
        }
        // window.location.href = 'javascript:history.go(-1)'
        // const menu = this.menuList.find(item=>item.id===this.menuActived);
        // // this.goBackFlag = false;
        // // this.headTitle = menu.name;
        // this.menuHandle(menu,false)
      },
      menuHandle(item, isHistoryNavigation = false) {
        this.loading = true;
        // 先判断是否是根页面
        if (this.isRootPage(item.url) && !isHistoryNavigation) {
          this.pageHistory = [];
        } else if (!isHistoryNavigation && this.currentPage) {
          // 写入历史页面压入栈顶
          this.pageHistory.push({
            url: this.currentPage.url,
            title: this.headTitle,
            menuId: this.menuActived
          });
        }
        // 共同的跳转
        this.currentPage = {
          url: item.url,
          name: item.name,
          id: item.id
        };

        this.menuActived = item.id;
        this.iframeUrl = item.url;
        this.headTitle = item.name;
        // 是否展示返回
        this.goBackFlag = this.pageHistory.length > 0;
        this.closeLoading();
      },
      //
      //   this.loading = true;
      //   this.menuActived = item.id;
      //   this.iframeUrl = item.url;
      //   this.headTitle = item.name;
      //   this.goBackFlag = goBackFlag;
      //   this.closeLoading()
      // },
      closeLoading() {
        this.timer = null;
        this.timer = setTimeout(() => {
          this.loading = false
        }, 500)
      },
      //   准备在其他页面调用的跳转
      safeNavigateTo(url, title, menuId) {
        if (this.isRootPage(url)) {
          this.pageHistory = [];
        }
        this.menuHandle({
          id: menuId || this.menuActived,
          url: url,
          name: title
        });
      }
    },
    watch: {
      iframeUrl(newVal, oldVal) {
        // 当 iframe URL 即将变化时，通知子页面保存状态
        const iframe = document.getElementById('cIframe');
        if (iframe && iframe.contentWindow && iframe.contentWindow.saveToCache) {
          iframe.contentWindow.saveToCache();
        }
      }
    }
  })
</script>
</body>
</html>
